<template>
	<view class="component-page">
		<view class="page-header">
			<view class="back-button" @click="backToHome">
				<text class="back-icon">←</text>
				<text>返回</text>
			</view>
			<text class="page-title">拖拽排序列表</text>
		</view>
		
		<view class="demo-section">
			<view class="section-title">
				项目拖拽排序
			</view>
			
			<view class="drag-panel">
				<view class="drag-header">
					<text class="drag-title">待办事项列表</text>
					<view class="drag-actions">
						<button class="action-button add-btn" @click="addTodoItem">添加项目</button>
						<button class="action-button save-btn" @click="saveTodoList">保存排序</button>
					</view>
				</view>
				
				<xl-drag-list 
					:list="todoItems" 
					@update:list="updateTodoList"
					@drag-start="onDragStart"
					@drag-end="onDragEnd"
				/>
				
				<view class="empty-list" v-if="todoItems.length === 0">
					<text class="empty-icon">📋</text>
					<text class="empty-text">列表为空，请添加项目</text>
				</view>
			</view>
		</view>
		
		
		
		<view class="demo-section">
			<view class="section-title">功能特性</view>
			<view class="feature-list">
				<view class="feature-item">
					<view class="feature-icon">↕️</view>
					<view class="feature-info">
						<text class="feature-title">垂直列表拖拽</text>
						<text class="feature-desc">上下移动排序列表项目</text>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">🔄</view>
					<view class="feature-info">
						<text class="feature-title">网格布局拖拽</text>
						<text class="feature-desc">支持照片墙、九宫格等布局</text>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">📊</view>
					<view class="feature-info">
						<text class="feature-title">自定义过渡动画</text>
						<text class="feature-desc">平滑的视觉过渡效果</text>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">📱</view>
					<view class="feature-info">
						<text class="feature-title">跨平台兼容</text>
						<text class="feature-desc">支持各类小程序和App环境</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import xlDragList from '@/components/xl-drag-list/index.vue';

// 添加组件注册
defineOptions({
	components: {
		xlDragList
	}
});

// 待办事项数据
const todoItems = ref([
	{ id: 1, title: '完成项目文档', desc: '编写详细的技术文档和使用说明', completed: true },
	{ id: 2, title: '修复已知BUG', desc: '解决用户反馈的界面卡顿问题', completed: false },
	{ id: 3, title: '实现新功能', desc: '添加用户请求的数据导出功能', completed: false },
	{ id: 4, title: '更新依赖库', desc: '将所有第三方库更新到最新版本', completed: false },
	{ id: 5, title: '优化性能', desc: '提高应用启动速度和响应时间', completed: false },
]);

// 新待办事项
const newTodo = reactive({
	title: '',
	desc: ''
});

// 更新待办列表
const updateTodoList = (newList) => {
	todoItems.value = newList;
};

// 图片项数据
const imageItems = ref([
	{
		id: 1, 
		url: 'https://picsum.photos/id/1015/300/300', 
		title: '山川湖泊'
	},
	{
		id: 2, 
		url: 'https://picsum.photos/id/1018/300/300', 
		title: '雪山风景'
	},
	{
		id: 3, 
		url: 'https://picsum.photos/id/1019/300/300', 
		title: '森林小路'
	},
	{
		id: 4, 
		url: 'https://picsum.photos/id/1022/300/300', 
		title: '北极光'
	}
]);

// 更新图片列表
const updateImageList = (newList) => {
	imageItems.value = newList;
};

// 图片拖拽开始
const onImageDragStart = (evt) => {
	console.log('图片拖拽开始', evt);
	uni.showToast({
		title: '开始拖拽图片',
		icon: 'none'
	});
};

// 图片拖拽结束
const onImageDragEnd = (evt) => {
	console.log('图片拖拽结束', evt);
	if (evt.oldIndex !== evt.newIndex) {
		uni.showToast({
			title: '图片排序已更新',
			icon: 'none'
		});
	}
};

// 返回首页
const backToHome = () => {
	uni.navigateBack();
};

// 修改弹窗部分
const showAddTodoDialog = () => {
	uni.showModal({
		title: '添加待办项',
		content: '请输入待办项标题',
		editable: true,
		success: function (res) {
			if (res.confirm) {
				const title = res.content;
				if (title.trim()) {
					const newItem = {
						id: Date.now(),
						title: title,
						desc: '',
						completed: false
					};
					todoItems.value.push(newItem);
				}
			}
		}
	});
};

// 替换原有的 addTodoItem 方法
const addTodoItem = () => {
	showAddTodoDialog();
};

// 确认添加待办项
const confirmAddTodo = () => {
	if (!newTodo.title.trim()) {
		uni.showToast({
			title: '标题不能为空',
			icon: 'none'
		});
		return;
	}
	
	// 添加到列表
	todoItems.value.push({
		id: Date.now(),
		title: newTodo.title,
		desc: newTodo.desc || '无描述',
		completed: false
	});
	
	// 显示提示
	uni.showToast({
		title: '添加成功',
		icon: 'success'
	});
};

// 删除待办项
const removeTodoItem = (index) => {
	uni.showModal({
		title: '确认删除',
		content: '确定要删除这个待办项吗？',
		success: (res) => {
			if (res.confirm) {
				todoItems.value.splice(index, 1);
				
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				});
			}
		}
	});
};

// 保存待办列表
const saveTodoList = () => {
	// 模拟保存操作
	uni.showLoading({
		title: '保存中...'
	});
	
	setTimeout(() => {
		uni.hideLoading();
		
		uni.showToast({
			title: '保存成功',
			icon: 'success'
		});
	}, 1000);
};

// 拖拽开始
const onDragStart = (evt) => {
	console.log('拖拽开始', evt);
};

// 拖拽结束
const onDragEnd = (evt) => {
	console.log('拖拽结束', evt);
	
	if (evt.oldIndex !== evt.newIndex) {
		uni.showToast({
			title: '排序已更新',
			icon: 'none'
		});
	}
};

// 添加图片
const addImageItem = () => {
	if (imageItems.value.length >= 9) {
		uni.showToast({
			title: '最多只能添加9张图片',
			icon: 'none'
		});
		return;
	}
	
	uni.chooseImage({
		count: 1,
		success: (res) => {
			const tempFilePath = res.tempFilePaths[0];
			
			imageItems.value.push({
				id: Date.now(),
				url: tempFilePath,
				title: `图片 ${imageItems.value.length + 1}`
			});
		}
	});
};

// 删除图片
const removeImageItem = (index) => {
	uni.showModal({
		title: '确认删除',
		content: '确定要删除这张图片吗？',
		success: (res) => {
			if (res.confirm) {
				imageItems.value.splice(index, 1);
				
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				});
			}
		}
	});
};

// 生命周期处理
onMounted(() => {
	// 模拟图片地址
	imageItems.value = imageItems.value.map(item => {
		return {
			...item,
			// 在实际应用中，这里应该使用真实的图片地址
			url: '/static/demo/placeholder.jpg'
		};
	});
});
</script>

<style lang="scss">
.component-page {
	padding: 30rpx;
	background-color: #f7f7f7;
	min-height: 100vh;
	box-sizing: border-box;
}

.page-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	
	.back-button {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		margin-right: 20rpx;
		
		.back-icon {
			font-size: 36rpx;
			margin-right: 6rpx;
		}
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
}

.demo-section {
	margin-bottom: 30rpx;
	
	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
}

.drag-panel {
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	
	.drag-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 30rpx;
		border-bottom: 1px solid #f5f5f5;
		
		.drag-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}
		
		.drag-actions {
			display: flex;
			
			.action-button {
				margin-left: 20rpx;
				height: 60rpx;
				line-height: 58rpx;
				font-size: 24rpx;
				border-radius: 30rpx;
				padding: 0 24rpx;
				
				&.add-btn {
					background-color: #007aff;
					color: #fff;
				}
				
				&.save-btn {
					background-color: #4cd964;
					color: #fff;
				}
			}
		}
	}
}

.todo-item {
	display: flex;
	align-items: center;
	padding: 24rpx 30rpx;
	border-bottom: 1px solid #f5f5f5;
	background-color: #fff;
	transition: background-color 0.3s;
	
	&:last-child {
		border-bottom: none;
	}
	
	&.dragging {
		background-color: #f9f9f9;
	}
	
	&.completed {
		background-color: #f9f9f9;
	}
	
	.drag-handle {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
		font-size: 36rpx;
		cursor: move;
	}
	
	.item-content {
		flex: 1;
		margin: 0 20rpx;
		
		.item-main {
			display: flex;
			align-items: center;
			margin-bottom: 6rpx;
			
			.item-checkbox {
				margin-right: 16rpx;
			}
			
			.item-title {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				
				&.completed {
					color: #999;
					text-decoration: line-through;
				}
			}
		}
		
		.item-desc {
			font-size: 26rpx;
			color: #666;
		}
	}
	
	.item-actions {
		.delete-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60rpx;
			height: 60rpx;
			font-size: 40rpx;
			color: #ff3b30;
		}
	}
}

.ghost-item {
	opacity: 0.5;
	background: #f5f5f5;
}

.chosen-item {
	background-color: #e5f7ff;
}

.empty-list {
	padding: 80rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	.empty-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
}

.image-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx;
}

.image-item {
	width: calc(33.33% - 20rpx);
	margin: 10rpx;
	height: 220rpx;
	position: relative;
	border-radius: 8rpx;
	overflow: hidden;
	
	.gallery-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.image-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 16rpx;
		background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.image-title {
			color: #fff;
			font-size: 24rpx;
			text-shadow: 0 1px 2px rgba(0,0,0,0.5);
		}
		
		.delete-image {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			background-color: rgba(255, 255, 255, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 30rpx;
		}
	}
}

.image-placeholder {
	width: calc(33.33% - 20rpx);
	margin: 10rpx;
	height: 220rpx;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.placeholder-icon {
		font-size: 60rpx;
		color: #999;
	}
}

.ghost-image {
	opacity: 0.5;
}

.chosen-image {
	z-index: 10;
	box-shadow: 0 0 20rpx rgba(0,0,0,0.2);
}

.feature-list {
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	padding: 10rpx 0;
	
	.feature-item {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		border-bottom: 1px solid #f5f5f5;
		
		&:last-child {
			border-bottom: none;
		}
		
		.feature-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 16rpx;
			background: linear-gradient(45deg, #34C759, #BFFFD0);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			margin-right: 24rpx;
		}
		
		.feature-info {
			flex: 1;
			
			.feature-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 6rpx;
				display: block;
			}
			
			.feature-desc {
				font-size: 26rpx;
				color: #666;
				display: block;
			}
		}
	}
}
</style> 